<!--
 * @Date         : 2023-11-06 21:37:46
 * @LastEditTime : 2023-11-25 14:38:14
 * @description  : searchPage
-->
<template>
  <view class="searchPage">
    <scroll-view
      class="scrollview"
      :scroll-y="true"
      @scrolltolower="scrolltolower"
      @scroll="onscroll"
    >
      <cl-header
        :title="detail.name"
        :isOccupy="false"
        :scrollTop="scrollTop"
        :transparent="true"
        :isBack="true"
      ></cl-header>
      <u-swiper :list="detail.cover" height="200" :indicator="true"></u-swiper>
      <div class="onlineDetail">
        <div class="main-content">
          <div class="name">
            {{ detail.name || "" }}
            <text class="name-tag">共{{ detail.chapter_num || "" }}课时</text>
          </div>
          <div class="tag">
            <text class="tag-n">{{ detail.course_cate || "" }}</text>
            <text class="zcr">主讲人：{{ detail.teacher || "" }}</text>
            <!-- <text class="hz">金牌教师</text> -->
          </div>
          <div class="content">
            <u-read-more ref="uReadMore" showHeight="200">
              <!-- <rich-text :nodes="content"></rich-text> -->
              <div class="desc">{{ detail.content || "" }}</div>
            </u-read-more>
          </div>
          <div class="label">课程视频</div>
          <div class="row displayFlex">
            <div
              class="row-item"
              v-for="(item, index) in chapterList"
              :key="index"
              @click="onVideoPage(item)"
            >
              <div class="chapterList">
                <div class="title">
                  {{ item.title || "" }}
                </div>
                <div class="duration">{{ item.duration || "" }}</div>
              </div>
            </div>
          </div>
          <div class="label">作品成果</div>
          <div class="row displayFlex">
            <div
              class="row-item"
              v-for="(item, index) in workList"
              :key="index"
              @click="onWork(item.id)"
            >
              <u--image
                :showLoading="true"
                :src="item.file_url[0]"
                width="120px"
                radius="10"
                height="80px"
              ></u--image>
            </div>
          </div>
          <!-- <div class="label"></div>
          <div class="row"></div> -->
        </div>
        <div class="function-button">
          <div class="button" @click="onPl">
            <image :src="require('@/assets/pl.png')" mode="aspectFit" />
            <div>评论</div>
          </div>
          <label>
            <div class="button">
              <button open-type="share"></button>
              <image :src="require('@/assets/fenx.png')" mode="aspectFit" />
              <div>分享</div>
            </div>
          </label>
          <div class="button" @click="onCollect">
            <u-icon
              :name="detail.is_collect == 1 ? 'star-fill' : 'star'"
              size="23"
            ></u-icon>
            <div>收藏</div>
          </div>
          <div class="button" @click="onRate">
            <image :src="require('@/assets/pingfen.png')" mode="aspectFit" />
            <div>评分</div>
          </div>
        </div>
        <div class="hb-style">
          <hb-comment
            ref="hbComment"
            @add="add"
            @del="del"
            @like="like"
            @focusOn="focusOn"
            :deleteTip="'确认删除？'"
            :cmData="commentData"
            :readNumer="readNumer"
            v-if="commentData"
          ></hb-comment>
        </div>
      </div>
    </scroll-view>
    <u-popup :show="show" round="20rpx" @close="close" mode="center">
      <view class="rate-style">
        <div class="rate-style-header">
          <image src="https://ysgapi.yfzxzjysg.top/bg.png" mode="" />
          <div class="header-text">
            <div>课程非常好</div>
            快给老师一个评分吧！
          </div>
        </div>
        <div class="rate-center">
          <u-rate v-model="rateValue" size="60rpx"></u-rate>
        </div>
        <div class="rate-button" @click="onScore">评价</div>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { get_course_details } from "@/apis/modules/user";
import hbComment from "@/components/hb-comment_1.2.2/components/hb-comment/hb-comment.vue";
import {
  addCollect,
  addComment,
  addScore,
  course_chapters,
  delComment,
  delreply,
  getComment,
  get_course_work,
  replyComment,
} from "apis/modules/user";
import { getStorage } from "utils/auth";
export default {
  name: "onlineDetail",
  components: { hbComment },
  data() {
    return {
      readNumer: 0,
      rateValue: 1,
      show: false,
      chapterList: [],
      commentData: "",
      scrollTop: 0,
      searchValue: "",
      detail: "",
      workList: [],
    };
  },
  onLaunch() {},
  onShow() {},
  onLoad() {
    this.getDourseDetails();
    this.getComment();
    this.getData();
  },
  onShareAppMessage(res) {
    return {
      imageUrl: this.detail.cover[0],
      title: `${this.detail.name}`,
    };
  },
  methods: {
    onCollect() {
      let { course_id } = this.$Route.query;
      addCollect({ course_id }).then((res) => {
        uni.showToast({
          title: "已收藏",
          duration: 2000,
        });
        setTimeout(() => {
          this.getDourseDetails();
        }, 1500);
      });
    },
    onRate() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    onScore() {
      let { course_id } = this.$Route.query;
      let { teacher_id } = this.detail;
      addScore({ course_id, teacher_id, score: this.rateValue }).then((res) => {
        this.show = false;
        uni.showToast({
          title: "评分成功",
          duration: 2000,
        });
      });
    },
    onPl() {
      this.$refs["hbComment"].commentInput();
    },
    onscroll(data) {
      this.scrollTop = data.detail.scrollTop;
    },
    add(data) {
      let { course_id } = this.$Route.query;
      console.log(data, "add");
      let isAdd = !!data?.pId;
      if (!isAdd) {
        addComment({
          content: data.content,
          course_id,
        }).then((res) => {
          uni.showToast({
            title: "评论成功",
            duration: 2000,
          });
          this.$refs["hbComment"].addComplete();
          this.getComment();
        });
      } else {
        replyComment({
          content: data.content,
          course_id,
          comment_id: data?.pId,
        }).then((res) => {
          uni.showToast({
            title: "回复成功",
            duration: 2000,
          });
          this.$refs["hbComment"].addComplete();
          this.getComment();
        });
      }
    },
    del(data) {
      console.log(data, "del");
      if (data.is_replys == 2) {
        delreply({ reply_id: data.id }).then((res) => {
          uni.showToast({
            title: "评论已删除",
            duration: 2000,
            icon: "none",
          });
          this.getComment();
        });
      } else {
        let { course_id } = this.$Route.query;
        delComment({
          comment_id: data.id,
          reply_id: data.reply_id,
          course_id,
        }).then((res) => {
          uni.showToast({
            title: "评论已删除",
            duration: 2000,
            icon: "none",
          });
          this.getComment();
        });
      }
    },
    like(data) {
      console.log(data, "like");
    },
    focusOn(data) {
      console.log(data, "focusOn");
    },
    onVideoPage(data) {
      let { course_id } = this.$Route.query;
      this.$Router.push({
        path: `/pagesA/videopayPage/videopayPage?course_id=${course_id}&video=${data.id}`,
      });
    },
    getTree(data) {
      let result = [];
      let map = {};
      data.forEach((item) => {
        map[item.id] = item;
      });
      data.forEach((item) => {
        let parent = map[item.parentId];
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });
      return result;
    },
    onWork(id) {
      this.$Router.push({
        path: `/pages/work/work?id=${id}`,
      });
    },
    getDourseDetails() {
      let { course_id } = this.$Route.query;
      get_course_details({ course_id }).then((res) => {
        this.detail = res;
        this.readNumer = res.play_num;
        this.$refs.uReadMore.init();
      });
    },
    getData() {
      let { course_id } = this.$Route.query;
      course_chapters({ course_id }).then((res) => {
        this.chapterList = res;
      });
      // 获取作品
      get_course_work({ course_id }).then((res) => {
        this.workList = res;
      });
    },
    scrolltolower() {},
    getComment() {
      let { course_id } = this.$Route.query;
      getComment({
        course_id,
        page: 1,
      }).then((res) => {
        let num = 0;
        let list = res.map((item) => {
          num = num + item.replys.length;
          if (item.replys.length > 0) {
            item["children"] = item.replys.map((i) => {
              i["owner"] = i["user_id"] == getStorage("userInfo").id;
              i["hasLike"] = false;
              i["likeNum"] = 0;
              i["avatarUrl"] = i["headimgurl"] || "";
              i["parentId"] = i["id"] || null;
              i["createTime"] = i["create_time"] || null;
              // i["nickName"] =
              //   i["nickName"]?.length > 10
              //     ? `${i["nickName"].subster(0, 10)}...`
              //     : i["nickName"];
              i["nickName"] = i["nickname"] || "微信昵称";

              return i;
            });
          }
          item["owner"] = item["user_id"] == getStorage("userInfo").id;
          item["hasLike"] = false;
          item["likeNum"] = 0;
          item["avatarUrl"] = item["headimgurl"] || "";
          item["parentId"] = item["id"] || null;
          item["createTime"] = item["create_time"] || null;
          item["nickName"] = item["nickname"] || "微信昵称";
          // item["nickName"] =
          //   item["nickName"]?.length > 2
          //     ? `${item["nickName"].subster(0, 10)}...`
          //     : item["nickName"];
          return item;
        });
        //         {
        //   id: 1, // 唯一主键
        //   owner: true, // 是否是拥有者，为 true 则可以删除，管理员全部为true
        //   hasLike: false, // 是否点赞
        //   likeNum: 2, // 点赞数量
        //   avatarUrl: "https://inews.gtimg.com/newsapp_ls/0/13797755537/0", // 评论者头像地址
        //   nickName: "超长昵称超长...", // 评论者昵称，昵称过长请在后端截断
        //   content: "啦啦啦啦", // 评论内容
        //   parentId: null, // 所属评论的唯一主键
        //   createTime: "2021-07-02 16:32:07", // 创建时间
        // },
        num = num + list.length;
        this.commentData = {
          commentSize: num,
          comment: list,
        };
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.searchPage {
  height: 100vh;
  background: #eeeeee;
  .scrollview {
    height: 100%;
    overflow: hidden;
  }
  .onlineDetail {
    background: #eeeeee;
    padding: 30rpx;
    .main-content {
      background: #fff;
      border-radius: 20rpx 20rpx 0 0;
      padding: 30rpx;
      .name {
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
        .name-tag {
          margin-left: 20rpx;
          font-size: 18rpx;
          font-weight: 400;
          color: #999999;
        }
      }
      .tag {
        font-size: 18rpx;
        font-weight: bold;
        color: #999999;
        text-align: left;
        margin: 20rpx 0;
        .tag-n {
          padding: 4rpx 20rpx;
          height: 31rpx;
          background: #eeeeee;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          opacity: 1;
        }
        .zcr {
          font-size: 20rpx;
          font-weight: bold;
          color: #999999;
          margin: 20rpx;
        }
        .hz {
          height: 27rpx;
          padding: 4rpx 20rpx;
          background: #ee4d02;
          border-radius: 30rpx 30rpx 30rpx 30rpx;
          width: 62rpx;
          font-weight: 400;
          color: #ffffff;
          line-height: 27rpx;
        }
      }
      .content {
        margin-top: 20rpx;
        font-size: 24rpx;
        font-weight: bold;
        color: #666666;
        .desc {
          font-size: 24rpx;
          font-weight: bold;
          color: rgba(102, 102, 102, 0.77);
          line-height: 50rpx;
        }
      }
      .label {
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
        margin-top: 40rpx;
      }
      .row {
        margin-top: 20rpx;
        min-height: 88rpx;
        overflow: auto;
      }
      .row-item {
        flex-shrink: 0;
        margin-right: 20rpx;
      }
    }
  }
}
.chapterList {
  width: 181rpx;
  height: 88rpx;
  background: #ffffff;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  border: 1rpx solid #e04411;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 10rpx 20rpx;
  .title {
    width: 100%;
    height: 32rpx;
    font-size: 24rpx;
    font-weight: bold;
    color: #e04411;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .duration {
    font-size: 18rpx;
    font-weight: bold;
    color: #999999;
  }
}
.displayFlex {
  display: flex;
}
.hb-style {
  background: #fff;
  padding-bottom: 20rpx;
  border-radius: 0 0 20rpx 20rpx;
}
.function-button {
  position: fixed;
  width: 316rpx;
  min-height: 90rpx;
  background: #ffffff;
  box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
  border-radius: 18rpx 18rpx 18rpx 18rpx;
  font-weight: bold;
  color: #999999;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 5;
  right: 29rpx;
  font-size: 18rpx;
  bottom: 70rpx;
  text-align: center;
  image {
    width: 34rpx;
    height: 40rpx;
  }
}

.rate-style {
  width: 80vw;
  // height: 70vh;
  overflow: hidden;
  .rate-style-header {
    width: 100%;
    height: 260rpx;
    position: relative;
    .header-text {
      position: absolute;
      top: 100rpx;
      width: 100%;
      text-align: center;
      color: #fff;
    }
    border-radius: 0 0 50% 50%/10%;
    overflow: hidden;
    image {
      width: 100%;
    }
  }
  .rate-center {
    margin: 40rpx auto;
    display: flex;
    justify-content: center;
  }
  .rate-button {
    background: #eb5e15;
    color: #fff;
    margin: 0 auto 40rpx;
    width: 40%;
    height: 80rpx;
    border-radius: 80rpx;
    text-align: center;
    line-height: 80rpx;
  }
}
</style>
